<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
          <span>Message</span>
        </div>
        <el-menu
          :default-active="$route.path"
          router
          background-color="#000"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
            <item :menuList='menuList'></item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left">
            <i class="el-icon-s-fold left-icon"></i>
            <div class="topMenu">
              <top-menu style="margin-left: 20px"></top-menu>
            </div>
          </div>
          <div class="right">
            <i
              style="color: rgb(9, 180, 248)"
              class="el-icon-bell right-icon"
            ></i>
            <el-dropdown style="margin-left: 20px" @command='handleClick'>
              <span class="el-dropdown-link">
                {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command='email'>邮箱 : {{ userEmail }}</el-dropdown-item>
                <el-dropdown-item command='goBack'>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import storage from '@/utils/storage'
import store from "@/store/index";
import TopMenu from "./TopMenu.vue";
import Item from './Item.vue';
export default {
  name: 'layout',
  components: { TopMenu, Item },
  data() {
    return {
      userName: store.state.userInfo.userName || "",
      userEmail: store.state.userInfo.userEmail || "",
      menuList: [],
    };
  },
  mounted() {
      this.getMenuList();
  },
  methods: {
      async getMenuList() {
          let res = await this.userApi.getMenuList();
          this.$store.commit('saveMenuList', res.menuList)
          this.$store.commit('saveActionList', res.actionList)
          this.menuList = res.menuList
      },
      handleClick(val){
          switch (val) {
              case 'email' :
                  console.log('邮箱');
                  break;
              case 'goBack' :
                  this.goBack();
                  break;
          }
      },
      goBack(){
          this.$store.commit('saveToken', null)
          this.$store.commit('saveMenuList', null)
          this.$store.commit('saveActionList', null)
          this.$store.commit('saveUserInfo', null)
          storage.clearAll();
          this.$router.push('/login');
          this.$message.success({
              message: '退出成功',
              offset: 80,
          })
      }
  },
};
</script>

<style scoped lang='scss'>
.layout {
  position: relative;
  width: 100vw;
  height: 100vh;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside {
      height: 100vh;
      background-color: #000;
      .logo {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin: 0 20px;
        }
        span {
          color: #fff;
          font-size: 18px;
        }
      }
      .el-menu{
          border-right: none;
      }
    }
    .el-container {
      background-color: gainsboro;
      .el-header {
        height: 7% !important;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        .left {
          display: flex;
          align-items: center;
        }
        .right {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
